<template>
	<view class="view_box">
		<loading-view v-if="isShowLoadingView"></loading-view>
		<view v-if="goodsList.length" class="member_box1 flex-col"  :style="'position: relative;top:20rpx'">
			<view v-if="goodsList.length" class="header">
				<router-link to="/bundle/pages/circulate/addgoods">
					<view class="icon_add_plus">
						<u-icon color="#333333" size="40" name="plus"></u-icon></view>
				</router-link>
			</view>
			<view v-for="(goodsDetail, index) in goodsList" :key="index" class="goods_info">
				<view class="content">
					<view class="info_title p-t-20 u-font-xl p-b-10" >
						<view class="title">
							<router-link :to="{path:'/pages/goods_details/goods_details',query:{id:goodsDetail.goods_id}}">
							{{goodsDetail.goods_name.length > 25 ? goodsDetail.goods_name.slice(0, 25) :  goodsDetail.goods_name }}
							</router-link>
						</view>
						<view class="spec_value_str">货号： {{goodsDetail.bar_code}} &nbsp;&nbsp; 规格：{{goodsDetail.spec_value}}</view>
					</view>
					<view class="bigImg" style="display: flex; justify-content: center; align-items: center;">
						<image  @tap="previewImage(goodsDetail.image)"  style="width:750rpx; height:750rpx" mode="aspectFit" :src="goodsDetail.image"
							class="usual-item-img"></image>
					</view>
				</view>
				<view class="service_button u-col-center flex-col">
					<view class="line" v-if="goodsDetail.qualification_id">
						<view>
							<router-link :to="{path: '/bundle/pages/goods_data/goods_data', query: {id: goodsDetail.qualification_id}}">
								<button class="my-btn sm border-b primary-border primary-color br60">产品数据</button>
							</router-link>
						</view>
					</view>
					<view class="line">
						<view v-if="goodsDetail.last_data_2">
							<router-link :to="{path: '/bundle/pages/circulate/goods_service_detail', query: {id: goodsDetail.last_data_2.id}}">
								<button class="my-btn  sm border-b primary-border disabled br60">查看羽绒回收</button>
							</router-link>
						</view>
						<!-- <button v-else class="my-btn bg-primary white br60" @tap="popAgreement(goodsDetail, 2)">羽绒回收</button> -->
						<button v-else class="my-btn  sm border-b primary-border primary-color br60" @tap="goServicePage(goodsDetail, 2)">羽绒回收</button>
					</view>
					<view class="line">
						<view v-if="goodsDetail.last_data_1">
							<router-link :to="{path: '/bundle/pages/circulate/goods_service_detail', query: {id: goodsDetail.last_data_1.id}}">
								<button class="my-btn  sm border-b primary-border disabled br60">查看清洗服务</button>
							</router-link>
						</view>
						<!-- <button v-else class="my-btn border-b white br60" @tap="popAgreement(goodsDetail, 1)">清洗服务</button> -->
						<button v-else class="my-btn sm border-b primary-border primary-color br60" @tap="goServicePage(goodsDetail, 1)">清洗服务</button>
					</view>
					
				</view>
			</view>
			<shop-arc-mask :aid="arcAid" :goodsDetail="goodsDetail" :service_type="service_type" :showmask="showArc"
				@hidePopMask="hidePopMask"></shop-arc-mask>
			<view class="fixed-button">
				<router-link to="/bundle/pages/contact_offical/contact_offical">
					<image style="width: 75rpx; height: 75rpx;" :src="imgUrl + '/wechat/static/images/icon_contact.png'"></image>
				</router-link>
			</view>
		</view>
		<view v-else>
			
			<view class="no-address flex-col col-center">
			    <image class="img-null mt20" src="/static/images/news_null.png"></image>
			    <view class="sm muted">
					<view>暂无产品，
					<text class="xs" @click="goPage('/bundle/pages/circulate/addgoods')" style="font-weight: bold; text-decoration: underline; cursor: pointer;">立即添加~</text>
					</view>
				</view>
			</view>
			
			
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getMyOrderGoods,
		addMyOrderGoods
	} from '@/api/user';
	import {
		mapGetters
	} from 'vuex';
	import {
		loadingType
	} from '@/utils/type';
	// import {
	// 	getRect,
	// 	trottle
	// } from '@/utils/tools';
	import {
		DISTRIBUTION,
		DISTRIBUTIONID,
		INVITE_CODE
	} from '@/config/cachekey';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				isShowLoadingView:true,
				item_id: 0,
				imgMood: 'aspectFit',
				goods_factory_code: '',
				actionText: "识别",
				showArc: false,
				goodsDetail: {},
				service_type: 0,
				arcAid: 0,
				goodsValue: '',
				imgUrl: `${this.$imgUrl}`,
				upOption: {
					auto: false,
					empty: {
						icon: `${this.$imgUrl}/wechat/static/images/goods_null.png`,
						tip: "暂无商品",
					}
				},
				menuButtonInfo: {},
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				count: 0,
				goodsList: [],
			};
		},
		// onShow() {
		// 	console.log('==============onShow====================-----------');
		// 	this.isShowLoadingView = true;
		// 	this.getGoodsDetailFun();
		// },
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
			// this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
			// this.isShowLoadingView = true;
		},
		onShow() {
			this.getGoodsDetailFun();
		},
		computed: {
			...mapGetters(['sysInfo'])
		},
		methods: {
			openExternalLink(ref_url) {
			  this.$Router.push({
			  	path: '/pages/webview/webview',
			  	query: {
			  		url: ref_url
			  	}
			  }) 
			},
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// this.menuButtonInfo.pos_top_height =  this.menuButtonInfo.top;
				this.menuButtonInfo.pos_logo_top_height =  '20';
			},
			
			goPage(url){
				this.$Router.push({
					path: url,
				})
			},
			goServicePage(goodsDetail, service_type) {
				if(service_type == 1){
					this.$toast({
						title: "暂未开通，敬请期待",
					});
					return;
				}
			    this.$Router.push({
			    	path: '/bundle/pages/circulate/apply',
			    	query: {
			    		service_type: service_type,
						item_id:goodsDetail.item_id
			    	}
			    })
			},
			previewImage(imageUrl) {
				uni.previewImage({
				    imageUrl,
				    urls: [imageUrl] // 需要预览的图片http链接列表
				});
			},
			async getGoodsDetailFun() {
				console.log('-------------getGoodsDetailFun-----------------------------------------');
				const {
					data,
					code
				} = await getMyOrderGoods({});
				if (code == 1) {
					this.isShowLoadingView = false;
					// if (data.count == 0) {
					// 	this.$toast({
					// 		title: "请先扫码添加商品"
					// 	});
					// 	setTimeout(() => {
					// 		this.$Router.push('/bundle/pages/circulate/addgoods')
					// 	}, 3000)
					// 	return
					// }
					this.goodsList = data.lists;
				} else {
					this.goodsList = [];
					// this.isNull = true
					this.isShowLoadingView = false;
				}
			},
			popAgreement(goodsDetail, service_type) {
				if (service_type == 1) {
					this.arcAid = 110; //弹出的文档ID
				} else if (service_type == 2) {
					this.arcAid = 120; //弹出的文档ID
				}
				this.goodsDetail = goodsDetail;
				this.showArc = true;
				this.service_type = service_type; //1:清洗服务;2羽绒回收
			},
			hidePopMask() {
				this.showArc = false;
			},
			getScanCodeResult(res) {
				this.goodsValue = res;
				this.actionText = '查询';
				this.isShowLoadingView = true;
				console.log('============getScanCodeResult==========-----------');
				this.getGoodsDetailFun();
			},
			clear() {
				this.goodsValue = "";
				this.actionText = '识别';
			},
			inputChange() {
				this.actionText = '查询';
			},
			downCallback() {
				this.onRefresh()
			},

			onChange(e) {
				this.keyword = e.value
			},
			init(option) {
				const {
					id,
					name,
					type
				} = this.$Route.query
				this.type = type
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.$nextTick(() => {
						this.onRefresh()
					})
				} else {
					uni.setNavigationBarTitle({
						title: '我的产品'
					});
					this.showHistory = true
				}
			},

			onClear() {
				if (this.id) {
					this.onRefresh();
				}
			},
			// onSearch(keyword) {
			// 	this.goodsValue = keyword;
			// 	this.getGoodsDetailFun();
			// },
			onRefresh() {
				this.goodsList = []
				this.mescroll.resetUpScroll();
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}
	.primary-border{
		border: $-primary-border;
	}
	.primary-color{
		color: $-color-primary;
	}
	.view_box{
		margin-bottom: 60rpx;
	}
	.top_nav_bar{
		position: fixed;
		z-index: 999;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.float_bar{
			margin-left: 20rpx;
			border: $-color-border solid 2rpx;
			border-radius: 30rpx;
		}
		.logo_text{
			width: 240rpx;
			margin-left: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.member_line{
		display: flex; 
		flex-direction: row; 
		justify-content: space-between;
		align-items: center;
		border-bottom: $-solid-border;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		.left{
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.big_text{
				color: $-color-black1;
				font-size: 38rpx;
				font-weight: 700;
				font-family: 'MiSans-Medium';
				margin-bottom: 10rpx;
			}
			.sub_text{
				font-size: small;
				color: $-color-black1;
			}
		}
		.right{
			margin-right: 30rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.icon_add_plus{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background-color: $-color-gray2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods_info {
		border: $-color-border-light;
		border-radius: 20rpx;
		// padding: 20rpx;
		// background-color: $u-bg-color;
		margin-bottom: 30rpx;
	}

	.member_box1 {
		display: flex;
		flex-direction: column;
		position: relative;
		top: 60rpx;
		padding-bottom: 30rpx;
		margin-bottom: 120rpx;
		.header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
			.search {
				position: relative;
				z-index: 1;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			// margin: 30rpx;
			line-height: 42rpx;

			.info_title {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				.title{
					font-size: larger;
					margin-bottom: 10rpx;
				}

				.spec_value_str {
					font-size: small;
					color: $-color-muted;
				}
			}
			
			.bigImg{
				
			}

			// .usual-item-img{
			// 	display: block;
			// 	width: 500rpx;
			// 	height: auto !important;
			// 	overflow: visible;
			// }
		}

		.service_button {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.line {
				width: 60%;
				margin-top: 20rpx;
			}
		}
		.search_button {
			margin-top: 30rpx;
		}
		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}

	.fixed-button {
			position: fixed;
			/* 固定在屏幕上 */
			bottom: 25%;
			/* 距离屏幕底部的距离 */
			right: 35rpx;
			/* 圆角，使其看起来更像一个圆形按钮 */
			z-index: 99;
			/* 提高层级，确保按钮在其他内容之上 */
			display: flex;
		}
	}
</style>